---
title: Tailwind CSS Crypto Login for React - Material Tailwind
description: Customise your web projects with our easy-to-use crypto login example for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "crypto-login",
  ]
github: crypto/crypto-login
---

<DocsTitle href="crypto-login">
# Tailwind CSS Crypto Login - React
</DocsTitle>

Use our Tailwind CSS Crypto Login example to add global search in your web projects.

See below our beautiful Aloglia Search example that you can use in your Tailwind CSS and React project. The example below is using the `@docsearch/react` library, make sure to install it before using the example.

```bash
npm i @docsearch/react
```

<br />
<br />

<CodePreview component={<Crypto.CryptoLogin />}>
```jsx
import React from "react";

// @components
import {
  Card,
  Input,
  Button,
  CardBody,
  CardHeader,
  Typography,
} from "@material-tailwind/react";

// @icons
import { CpuChipIcon } from "@heroicons/react/24/solid";

export function CryptoLogin() {
  return (
    <Card
      shadow={false}
      className="md:px-24 md:py-14 py-8 border border-gray-300"
    >
      <CardHeader shadow={false} floated={false} className="text-center">
        <Typography
          variant="h1"
          color="blue-gray"
          className="mb-4 !text-3xl lg:text-4xl"
        >
          Web3 Login Simplified
        </Typography>
        <Typography className="!text-gray-600 text-[18px] font-normal md:max-w-sm">
          Enjoy quick and secure access to your accounts on various Web3
          platforms.
        </Typography>
      </CardHeader>
      <CardBody>
        <form
          action="#"
          className="flex flex-col gap-4 md:mt-12"
        >
          <div>
            <label htmlFor="email">
              <Typography
                variant="small"
                color="blue-gray"
                className="block font-medium mb-2"
              >
                Your Email
              </Typography>
            </label>
            <Input
              id="email"
              color="gray"
              size="lg"
              type="email"
              name="email"
              placeholder="name@mail.com"
              className="!w-full placeholder:!opacity-100 focus:!border-t-primary !border-t-blue-gray-200"
              labelProps={{
                className: "hidden",
              }}
            />
          </div>
          <Button size="lg" color="gray" fullWidth>
            continue
          </Button>
          <Button
            variant="outlined"
            size="lg"
            className="flex h-12 border-blue-gray-200 items-center justify-center gap-2"
            fullWidth
          >
            <img
              src={`https://www.material-tailwind.com/logos/logo-google.png`}
              alt="google"
              className="h-6 w-6"
            />{" "}
            sign in with google
          </Button>
          <Button
            variant="outlined"
            size="lg"
            className="flex h-12 border-blue-gray-200 items-center justify-center gap-2"
            fullWidth
          >
            <CpuChipIcon className="h-6 w-6" />
            Wallet Authentication
          </Button>
          <Typography
            variant="small"
            className="text-center mx-auto max-w-[19rem] !font-medium !text-gray-600"
          >
            Upon signing in, you consent to abide by our{" "}
            <a href="#" className="text-gray-900">
              Terms of Service
            </a>{" "}
            &{" "}
            <a href="#" className="text-gray-900">
              Privacy Policy.
            </a>
          </Typography>
        </form>
      </CardBody>
    </Card>
  );
}

export default CryptoLogin;
```
</CodePreview>
